<template>
<!-- 如何在父组件写了子组件替换插槽的样子，会把样式和标签解析完毕，传入子组件 -->
    <div id="app">
      <category title="美食" :listData="foods">
        <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      </category>

      <category title="游戏" :listData="games">
        <ul>
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ul>
      </category>

      <category title="电影" :listData="games">
        <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      </category>
    </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
    name: "App",
    components: {
      Category
    },
    data() {
        return {
          foods:["火锅","烧烤","小龙虾","牛排"],
          games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
          films:["《电影0》","《电影1》","《你好，vue》","《冯镠霖》"]
        }
    },
    methods: {

    }
}
</script>

<style>
#app {
  display: flex;
  justify-content: space-around;
}
video{
  width: 100%;
}
</style>
